<template>
    <div class="singer">
      <div class="singer-top" >
        <div>
          <svg class="icon" @click="$router.go(-1)">
            <use xlink:href="#icon-zuo1"></use>
          </svg>
        </div>
        <h1>热门歌手</h1>
        <div class="title" @click="is=!is">选择分类</div>
      </div>
      <div class="char">
        <div v-for="(item,i) in types" :key="i"
             :class="isactive === i ? 'addclass' : '' "
             @click="value(item), onclick(i)">
        {{item}}
        </div>
      </div>
      <div class="singerList" v-show="!is">
          <router-link :to="{path:'/singerHomepage',query:{id:item.id}}" class="singerList-title" v-for="(item,i) in singerList" :key="i">
              <img :src="item.img1v1Url" alt="">
              <div class="name">
                {{item.name}}
                <span v-if="item.accountId!=null">
                  <svg class="icon">
                    <use xlink:href="#icon-renzheng"></use>
                  </svg>
                </span>
              </div>
          </router-link>
      </div>
      <div class="singer-type" v-show="is">
        <ul>
          推荐
          <li @click="hot()">热门歌手</li>
        </ul>
        <ul v-for="(item,i) in languageList" :key="i">
          {{item}}
          <li v-for="(time,k) in typeList" :key="k" @click="search(item,k)">
            {{item}}{{time}}
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
import { setArtists, setArtistss } from '@/api/index.js'
export default {
  data () {
    return {
      singerList: [],
      is: false,
      isactive: 0,
      types: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
        'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
        'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '其他'],
      languageList: ['华语', '欧美', '日本', '韩国', '其他'],
      typeList: ['男歌手', '女歌手', '组合/乐团'],
      initial: -1,
      area: -1,
      type: -1
    }
  },
  async mounted () {
    const artists = await setArtists()
    this.singerList = artists.data.artists
  },
  methods: {
    async hot () {
      const artists = await setArtists()
      this.singerList = artists.data.artists
      this.is = false
    },
    value (item) {
      if (item === '热门') {
        this.initial = -1
      } else if (item === '其他') {
        this.initial = 0
      } else {
        this.initial = item.toLowerCase()
      }
      this.revise()
    },
    onclick (i) {
      console.log(i)
      this.isactive = i
    },
    search (item, time) {
      if (item === '华语') {
        this.area = 7
      } else if (item === '欧美') {
        this.area = 96
      } else if (item === '日本') {
        this.area = 8
      } else if (item === '韩国') {
        this.area = 16
      } else if (item === '其他') {
        this.area = 0
      }
      this.type = time + 1
      this.revise()
      this.is = false
    },
    async revise () {
      const artistss = await setArtistss(this.type, this.area, this.initial)
      this.singerList = artistss.data.artists
    }
  }
}
</script>
<style lang="less" scoped>
.singer{
     width: 7.5rem;
    .singer-top{
        display: flex;
        width: 7.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding-bottom: 0.1rem;
        border-bottom:2px solid red;
        .icon{
            width: 0.6rem;
            height: 0.6rem;
        }
        .title{
          border: 1px solid #ccc;
          background-color: #ccc;
          font-weight: normal;
          border-radius: 8%;
          padding: 0.1rem;
          color:rgb(14, 30, 46);
        }
    }
    .char{
        width: 7.1rem;
        display:flex;
        flex-wrap: wrap;
        margin: 0.1rem 0;
        div{
          margin-left: 0.4rem;
          line-height: 0.5rem;
          padding: 0 0.1rem;
          }
        .addclass{
          background-color: red;
        }
      }
    .singerList{
      width: 7.1rem;
      margin: 0.2rem auto;
      display:flex;
      flex-wrap: wrap;
      height:8.9rem;
      overflow:scroll;
      .singerList-title{
        margin: 0 auto;
        margin-bottom: 0.2rem;
        img{
        width: 2.5rem;
        height: 2.5rem;
        }
        .name{
          text-align: center;
          .icon{
            float:right;
            width: 0.4rem;
            height: 0.4rem;
          }
        }
      }
    }
    .singer-type{
      width: 7.1rem;
      margin: 0 auto;
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 0.2rem;
      ul{
        font-size: 0.5rem;
        margin-bottom: 0.2rem;
        li{
          font-size: 0.3rem;
          margin:0.2rem  0.5rem ;

        }
      }
    }
}
</style>
